<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <Search :allOpts="formInline.allOpts" v-model="formInline.cOpts" @blur="search"></Search>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleAdd" :disabled="butStatus.add" type="success">创建</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="handleUpdate" :disabled="butStatus.update">修改</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleDelete" :disabled="butStatus.rm" type="danger">删除</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table
      v-loading="listLoading"
      :data="tableData"
      border
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column label="组名" prop="task_group_name">
      </el-table-column>
      <el-table-column label="描述" prop="task_group_desc">
      </el-table-column>
    </el-table>

    <!--分页-->
    <el-col :span="24" class="toolbar" style="padding-bottom:10px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.start_index"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pagination.page_count"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.count"
        style="float:right"></el-pagination>
    </el-col>

    <!--修改界面-->
    <el-dialog :title="formTitle" v-model="dialogFormVisible" size="tiny" @close="resetForm">
      <el-form :model="form" :rules="rules" ref="form">

        <el-form-item label="组名" prop="task_group_name" :label-width="formLabelWidth">
          <el-input v-model="form.task_group_name" :disabled="formTitle!='添加'"></el-input>
        </el-form-item>

        <el-form-item label="描述" prop="task_group_desc" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.task_group_desc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 消</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading">{{btnEditText}}</el-button>
      </div>
    </el-dialog>

  </section>
</template>

<script>
  import dao from '../../common/dao'
  import {mapGetters} from 'vuex'
  import {mapActions} from 'vuex'
  import NProgress from 'nprogress'
  import Search from '../../components/Search.vue'


  export default {

    components: {Search},
    computed: {
      ...mapGetters([
        'getUser'
      ])
    },
    data() {
      return {
        formTitle: "添加",
        dialogFormVisible: false,
        listLoading: false,
        tableData: [],
        multipleSelection: [],
        rules: {
          task_group_name: [
            {required: true, message: '请输入组名', trigger: 'blur'},
            {validator: this.validateName, trigger: 'blur'},
          ]
        },
        form: {
          task_group_name: '',
          task_group_desc: ''
        },

        butStatus: {
          add: false,
          update: true,
          rm: true,
        },
        formInline: {
          allOpts: [{
            key: 'user_task_name',
            label: '组名',
            type: '',
            val: ''
          }],
          cOpts: [{
            key: 'user_task_name',
            label: '组名',
            type: '',
            val: ''
          }]
        },
        pagination: {
          count: 0,
          start_index: 1,
          page_count: 20,
        },
        btnEditText: "提交",
        editLoading: false,
        formLabelWidth: "120px",
      }
    },
    watch: {
      multipleSelection(){
        let len = this.multipleSelection.length
        if (len == 0) {

          this.butStatus = {
            add: false,
            update: true,
            rm: true,
          }
        } else if (len == 1) {
          this.butStatus = {
            add: false,
            update: false,
            rm: false,
          }
        } else {
          this.butStatus = {
            add: false,
            update: true,
            rm: false,
          }
        }

      },
    },
    methods: {
      ...mapActions([
        'setUser' // 映射 this.setuser() 为 this.$store.dispatch('setuser')
      ]),
      validateName(rule, value, callback){
        if (!value) {
          callback(new Error('请输入组名'));
        } else {
          dao.validateTaskGroupName({"task_group_name": value}).then((response) => {
            if (response.body.retMsg != "1") {
              callback(new Error('名称重复'));
            }
            callback();
          })
        }

      },
      async handleDelete(){
        this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let task_group_ids = this.multipleSelection.map(item => {
            return item.task_group_id
          });
          return dao.taskgroupDelete({task_group_ids})
        }).then(res=>{
          if (res.FX.err) return false
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getTaskgroup()
        })


      },
      search(){
        this.getTaskgroup()
      },
      handleUpdate(){
        this.formTitle = '修改'
        this.rules= {
          task_group_name: [
            {required: true, message: '请输入组名', trigger: 'blur'},
          ]
        }
        this.$refs.form?this.$refs.form.resetFields() : void 0;



        let one = JSON.parse(JSON.stringify(this.multipleSelection[0]))
        this.form = one;
        this.dialogFormVisible = true
      },


      handleAdd(){
        this.rules= {
          task_group_name: [
            {required: true, message: '请输入组名', trigger: 'blur'},
            {validator: this.validateName, trigger: 'blur'},
          ]
        }
        this.$refs.form?this.$refs.form.resetFields() : void 0;

        this.formTitle = '添加'
        this.form = {
          task_group_name: '',
          task_group_desc: ''
        }
        this.dialogFormVisible = true
      },
      handleSelectionChange(val){
        this.multipleSelection = val||[];
      },
      updateButStatus(){

      },
      handleSizeChange(){
      },
      handleCurrentChange(){
      },
      resetForm(){
        this.dialogFormVisible = false
      },
      async send(){
        let fun = this.formTitle == '添加' ? 'taskgroupAdd' : 'taskgroupUpdate'
        let res = await dao[fun](this.form);
        if (res.FX.err) return false;
        this.$message({
          type: 'success',
          message: '操作成功!'
        });
        this.dialogFormVisible = false
        this.getTaskgroup()
      },
      async editSubmit(){
        this.$refs.form.validate((valid) => {
          if (!valid) return false;
          this.send()
        })
      },
      async getTaskgroup(){
        let task_group_name = this.formInline.cOpts[0].val
        let start_index = this.pagination.start_index
        let page_count = this.pagination.page_count
        let res = await dao.getTaskgroup({task_group_name, start_index, page_count})
        if (res.FX.err) return false
        this.pagination.count = res.body.count;
        this.tableData = res.body.results
      },
    },
    mounted (){
      this.getTaskgroup()
    }
  }
</script>

<style scoped>

</style>